import './App.css';
import React from 'react';
import { Button, Toast, List, Switch, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
import * as request from './request';

const Item = List.Item;
class LoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            loading: false,
        }
    }
    componentDidMount() {
    }
    onSubmit = () => {
        this.props.form.validateFields((error, value) => {
            this.setState({ loading: true });
            let _this = this;
            if (!error) {
                request.post("/api/services/app/Members/Login?username=" + value.username + "&password=" + value.password, null).then((response) => {
                    if (response) {
                        if (response.success) {
                            _this.doAuth();
                            Toast.info('登录成功');
                            let memberId = response.result.id
                            localStorage.setItem("memberId", memberId);   
                            _this.props.setUser(response.result);                    
                            _this.props.history.push('/Child/' + memberId);
                        }
                        else {
                            Toast.fail(response.error.message);
                        }
                        this.setState({ loading: false });
                    }
                });
            }
            else
                this.setState({ loading: false });
        });
    }
    doAuth = () => {
        var value = {
            userNameOrEmailAddress: 'admin',
            password: '123qwe'
        }
        request.post("/api/TokenAuth/Authenticate", value).then((response) => {
            if (response) {
                if (response.success) {
                    localStorage.setItem("accessToken", response.result.accessToken);
                }
                else {
                    Toast.fail(response.error.message);
                }
                this.setState({ loading: false });
            }
        });
    }
    render() {
        const { loading } = this.state;
        const { getFieldProps, getFieldError } = this.props.form;

        return (
            <form>
                <List
                    renderFooter={() => getFieldError('username') && getFieldError('username').join(',')}
                >
                    <InputItem
                        {...getFieldProps('username', {
                            rules: [
                                { required: true, message: '请输入用户名' },
                                { validator: this.validateAccount },
                            ],
                        })}
                        clear
                        error={!!getFieldError('username')}
                        onErrorClick={() => {
                            Toast.info(getFieldError('username').join('、'));
                        }}
                        placeholder="用户名/手机号"
                    >用户名</InputItem>
                    <InputItem {...getFieldProps('password', {
                        rules: [
                            { required: true, message: '请输入密码' },
                        ],
                    })}
                        clear
                        error={!!getFieldError('password')}
                        onErrorClick={() => {
                            Toast.info(getFieldError('password').join('、'));
                        }}
                        placeholder="请输入密码" type="password"> 密码 </InputItem>
                    <Item
                        extra={<Switch {...getFieldProps('remember', { initialValue: true, valuePropName: 'checked' })} />}
                    >记住我</Item>
                    <Item>
                        <Button type="primary" onClick={this.onSubmit} loading={loading}>登录</Button>
                    </Item>
                </List>

            </form>
        )
    };
}

export default createForm()(LoginForm);
